<div id="panelLayoutValorPredio" align="center" style="width: 1000px;margin: 3px;">
    <table>
        <tr>
            <td colspan="2">
                Valor del predio :
                <input type="text" id="txtValorPredio" name="txtValorPredio" value="">
            </td>
        </tr>
        <tr>
            <td>
                <div id="panelValorPredio">
                    <table id="tblValorPredio"></table>
                    <div id="ptblValorPredio"></div>
                    <input type="hidden" id="ctblValorPredio" name="ctblValorPredio" value="" />
                </div>
            </td>
            <td>
                <div id="container" style="min-width: 400px; height: 300px; margin: 0 auto"></div>
            </td>
        </tr>
    </table>
</div>
<script type="text/javascript">
    configurarValorPredio = function(dataJSON) {
        bindkeys = null;
        navGrid = null;
        parameters = {};
        options = {data: dataJSON,
            width: 900,
            height: "auto",
            colNames: ['Periodo'
                        , 'Area Terr.'
                        , 'Arancel'
                        , 'V. Terreno'
                        , 'V. Construcci\u00F3n'
                        , 'V. Instalaci\u00F3n'
                        , 'Base Imponible'
                        , '% Afecto'
                        , 'Autovaluo'
                        , 'mhresum'
                        , 'mpredio'
                        , 'dpredio'],
            colModel: [
                {name: "cperiod", index: "cperiod", width: 70, align: "center"},
                {name: "nterren", index: "nterren", width: 80, align: "right"},
                {name: "narance", index: "narance", width: 80, align: "right"},
                {name: "nvalter", index: "nvalter", width: 100, align: "right"},
                {name: "nvalpis", index: "nvalpis", width: 100, align: "right"},
                {name: "nvalins", index: "nvalins", width: 100, align: "right"},
                {name: "nvalpre", index: "nvalpre", width: 100, align: "right"},
                {name: "nporafe", index: "nporafe", width: 80, align: "right"},
                {name: "nvalafe", index: "nvalafe", width: 100, align: "right"},
                {name: "mhresum", index: "mhresum", width: 100, align: "right", hidden: true},
                {name: "mpredio", index: "mpredio", width: 100, align: "right", hidden: true},
                {name: "dpredio", index: "dpredio", width: 100, align: "right", hidden: true}
            ],
            caption: "&nbsp;&nbsp;&nbsp;Valorizaci\u00F3n del Predio",
        };
        idPanel = "panelValorPredio";
        idx = "tblValorPredio";

        if (dataJSON != undefined && dataJSON.length > 0) {
            procesarJSON(idPanel, idx, options, bindkeys, navGrid);
        } else {
            $("#panelValorPredio").css({display: "none"});
        }
    };

    configurarGraf = function(data) {
        dataSerie = [];
        total = 0;
        $.each(data, function(k, v) {
            total += parseFloat(v.npendie);
        });

        console.log(total);

        $.each(data, function(k, v) {
            dataSerie[k] = {name: v.vdescri, y: v.npendie / total};
        });

        console.log(dataSerie);
        console.log("dataSerie");
        /*[
         {name: 'IP', y: 45.0},
         {
         name: 'BC',
         y: 39.6,
         sliced: true,
         selected: true,
         },
         ['RS',    8.5],
         ['PS',     6.2],
         ['SG',   0.7]*/


        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: 'Situaci\u00F3n de la Deuda Pendiente'
            },
            subtitle: {
                text: 'No incluye intereses ni reajustes'
            },
            tooltip: {
                pointFormat: '<b>{point.percentage}%</b>',
                percentageDecimals: 1
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        color: '#000000',
                        connectorColor: '#000000',
                        formatter: function() {
                            // return '<div style="align:center;"><b>'+ this.point.name +'</b><br/>'+ this.percentage +' %</div>';
                            return this.percentage + ' %';
                        }
                    },
                    showInLegend: true
                }
            },
            series: [{
                    type: 'pie',
                    name: '',
                    data: dataSerie
                }]
        });
    };

    $(document).ready(function() {
        parameters = {
            mpredio: "<?php echo $this->mpredio; ?>",
            mhresum: "<?php echo $this->mhresum; ?>",
            cidpers: "<?php echo $this->cidpers; ?>",
        };
        _post = $.post(path + "registro/prediovalor", parameters);
        _post.success(function(data) {
            configurarValorPredio(data.valorpredio);
            configurarGraf(data.resumensaldo);
        });
        _post.error(postError);
    });
</script>